<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px" class="aside">
        <div class="image" style="background-color: cornsilk">
          <img src="/image/heal.png" />
        </div>
        <el-menu :default-openeds="['1']">
          <el-menu-item index="/index" @click="toindex()"
            ><el-icon><House /></el-icon>首页</el-menu-item
          >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Memo /></el-icon>基本信息管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="docinfo()"
                ><el-icon><UserFilled /></el-icon>医生信息管理</el-menu-item
              >
              <el-menu-item index="1-2" @click="patientinfo()"
                ><el-icon><UserFilled /></el-icon>患者信息管理</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Memo /></el-icon>查体项目管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="Category()"
                ><el-icon><Menu /></el-icon>疾病所属项目</el-menu-item
              >
              <el-menu-item index="2-2" @click="PEPManage()"
                ><el-icon ><Menu /></el-icon>体检项目管理</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>体检信息管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="Patientout()"
                ><el-icon><Menu /></el-icon>体检队列编外人员</el-menu-item
              >
              <!-- <el-menu-item index="3-2"
                ><el-icon><Menu /></el-icon>当前体检队列人员</el-menu-item
              > -->
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="/recommend" @click="checkreco()"
            ><el-icon><Memo /></el-icon>检查推荐</el-menu-item
          >
          <el-menu-item index="/question" @click="question()"
            ><el-icon><Histogram /></el-icon>调查问卷</el-menu-item
          >
          <el-menu-item index="/aiservice" @click="customerservice()"
            ><el-icon><Service /></el-icon>智能客服</el-menu-item
          >
        </el-menu>
      </el-aside>

      <el-container class="container">
        <el-header class="header">
          <div class="header-child">
            <div style="margin-top: 15px">
              <el-image
                src="/image/medical-kit.png"
                style="height: 50px; width: 70px"
              />
            </div>
            <p style="font-size: 26px; text-align: center">智能医疗管理系统</p>
            <div class="header-user">
              <!-- <el-icon class="user-icon"><Avatar />:</el-icon> -->
              <el-avatar
                :size="50"
                :src="`https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png`"
              />
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo fixed-width-menu"
                mode="vertical"
              >
                <el-sub-menu index="1">
                  <template #title>{{ identify }}</template>
                  <el-menu-item index="1-1" @click="out()"
                    >退出账号</el-menu-item
                  >
                  <el-menu-item index="1-2" @click="out()">注销</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </div>
          </div>
        </el-header>
        <router-view></router-view>
        <el-main class="main" v-show="$route.meta.showfater">
          <div class="main-header">
            <h2 style="text-align: center; padding-top: 10px">
              欢迎使用智能医疗管理系统
            </h2>
            <span style="float: right; margin-right: 20px">{{
              currentTime
            }}</span>
          </div>
          <div class="main-body">
            <div class="navigation">
              <router-link to="/BaseInfo" class="astyle"  style="text-decoration: none;">
                <div class="bodychild">
                  <img src="/image/doc.png" class="img" />

                  <a href="#" style="text-decoration: none;">医生信息</a>
                </div>
              </router-link>

              <router-link to="/PatientInfo" class="astyle">
                <div class="bodychild">
                  <img src="/image/patient.png" class="img" />

                  <a href="#" style="text-decoration: none;">患者信息</a
                  >
                </div>
              </router-link>
              <router-link to="/PatientInfo" class="astyle">
                <div class="bodychild">
                  <img src="/image/queue.png" class="img" />

                  <a href="#" style="text-decoration: none;">患者队列状态</a>
                </div>
              </router-link>

              <router-link to="/questionnaire" class="astyle">
                <div class="bodychild">
                  <img src="/image/quest.png" class="img" />

                  <a href="#" style="text-decoration: none;">调查问卷</a>
                </div>
              </router-link>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  <script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";


const router = useRouter();
//如果时间不足两位则在前面加0
function padZero(number) {
  const str = number.toString();
  if (str.length < 2) {
    return "0" + str;
  }
  return str;
}

const currentTime = ref("");

onMounted(() => {
  const updateCurrentTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = padZero(now.getMonth() + 1);//月份是从0开始算的
    const day = padZero(now.getDate());
    const hour = padZero(now.getHours());
    const minute = padZero(now.getMinutes());
    const second = padZero(now.getSeconds());

    currentTime.value = `${year}-${month}-${day} ${hour}:${minute}:${second}`;

    setTimeout(updateCurrentTime, 1000);
  };

  updateCurrentTime();
});
const users = ref();
const identify = ref();
//获得y用户信息
const selectduser = () => {
  console.log(router.currentRoute.value.params.username);
  axios
    .get(
      "http://localhost:8080/userPost?userName=" +
        router.currentRoute.value.params.username
    )
    .then((res) => {
      users.value = res.data;
      identify.value = router.currentRoute.value.params.username;
      console.log(users.value);
    });
};
onMounted(() => {
    selectduser();
});

//跳转页面
const toindex = () => {
  router.push("/index/" + localStorage.getItem("username"));
};
const patientinfo = () => {
  router.push("/patientInfo");
};
const docinfo = () => {
  router.push("/BaseInfo");
};
const Patientout = () => {
  router.push("/Patientout");
};
const Category = () => {
  router.push("/DiseaseCategory");
};
const PEPManage = () => {
  router.push("/PEPManage");
};
const checkreco = () => {
  router.push("/CheckReco");
};
const question = () => {
  router.push("/questionnaire");
};

const customerservice = () => {
  router.push("/CustomerService");
};
//退出登录
const out = () => {
  router.push("/login");
};
</script>



<style lang="scss" scoped>
.el-main {
  margin: 0;
}
.layout {
  .aside {
    height: calc(100vh);
    .image {
      text-align: center;
      img {
        height: 100px;
        width: 120px;
        margin: auto;
      }
    }
  }
  .container {
    .header {
      height: 80px;
      background-color: white;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      .header-child {
        display: flex;
        justify-content: space-between;
      }
      .header-user {
        display: flex;
        justify-content: space-around;
        text-align: center;
        align-items: center;
        font-size: 24px;

        .el-menu-demo {
          height: 60px;
          width: 100px;
          border: 0;
          text-align: center;
        }
      }
    }
    .main {
      height: calc(100vh - 80px);
      background-color: rgb(250, 252, 253);
      .main-body {
        margin-top: 14px;
        border-radius: 10px;
        height: calc(86vh - 100px);
        background-color: rgb(255, 255, 255);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

        .navigation {
          padding-top: 40px;
          display: flex;
          justify-content: space-around;
          .astyle{
            text-decoration: none;
          }
          .bodychild {
            width: 200px;
            height: 210px;
            text-align: center;
            .img {
              width: 200px;
              height: 200px;
            }
            // #span {
            //   text-align: center;
            //   text-decoration: none;
            // }
          }
        }
      }
      .main-header {
        height: 80px;
        // border: 1px solid black;
        border-radius: 10px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        background-color: rgb(255, 255, 255);
      }
    }
  }
}

</style>
 